<template>
  <div class="data-container">
    <div class="content" ref="domRef">
      <div class="header">
        <div class="title">访问量大数据展示平台</div>
        <div class="show-time">{{ showTime }}</div>
      </div>
      <div class="center"><CustomVisit /></div>
      <div class="footer">
        <div class="left">
          <lineChart
            width="480px"
            height="320px"
            :config="{ backgroundColor: '#0F224C' }"
          />
          <radarChart
            width="480px"
            height="320px"
            :config="{ backgroundColor: '#0F224C' }"
          />
        </div>
        <div class="middle">
          <Migration />
        </div>
        <div class="right">
          <barChart
            width="480px"
            height="320px"
            :config="{ backgroundColor: '#0F224C' }"
          />
          <scatterChart
            width="480px"
            height="320px"
            :config="{ backgroundColor: '#0F224C' }"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, computed, onUnmounted } from "vue";
import CustomVisit from "./components/CustomVisit.vue";
import Migration from "@/components/charts/migration/Migration.vue";
import lineChart from "@/components/charts/line.vue";
import scatterChart from "@/components/charts/scatter.vue";
import barChart from "@/components/charts/bar.vue";
import radarChart from "@/components/charts/radar.vue";
import moment from "moment";
const domRef = ref<HTMLElement>();
const mounted = ref<boolean>(true);

const showTime = ref<string>("");

/**
 * 设置可视化大屏自适应
 */
const setScale = () => {
  const { clientWidth, clientHeight } = document.body;
  var width = 1920,
    height = 1080;
  let left;
  let top;
  let scale;
  // 获取比例  可视化区域的宽高比与 屏幕的宽高比  来进行对应屏幕的缩放
  if (clientWidth / clientHeight > width / height) {
    scale = clientHeight / height;
    top = 0;
    left = (clientWidth - width * scale) / 2;
  } else {
    scale = clientWidth / width;
    left = 0;
    top = (clientHeight - height * scale) / 2;
  }
  // 防止组件销毁后还执行设置状态s
  if (mounted.value) {
    Object.assign(domRef.value!.style, {
      transform: `scale(${scale})`,
      left: `${left}px`,
      top: `${top}px`,
    });
  }
};

onMounted(() => {
  mounted.value = true;
  setScale();
  setInterval(() => {
    showTime.value = moment().format("yyyy-MM-DD hh:mm:ss");
  });
  window.addEventListener("resize", setScale);
});
onBeforeUnmount(() => {
  mounted.value = false;
  window.removeEventListener("resize", setScale);
});
onUnmounted(() => {
  window.addEventListener("resize", null);
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.data-container {
  background-color: #030409;
  color: aliceblue;
  width: 100vw;
  height: 100vh;

  .content {
    background-color: #041c4a;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    transform-origin: left top;
    z-index: 999;
    position: fixed;
    transition: all 0.3s;
    box-sizing: border-box;

    .header {
      height: 91px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-image: url("@/assets/img/header/header-bg.png");
      display: flex;
      justify-content: center;
      align-items: center;

      .title {
        font-size: 42px;
        margin-top: -20px;
      }

      .show-time {
        font-size: 18px;
        position: absolute;
        right: 10px;
        color: #87caff;
      }
    }

    .center {
      margin: 40px 0;
    }

    .footer {
      position: relative;
      padding: 0 20px;
      display: flex;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 500px;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 500px;
      }
      .middle {
        flex: 1;
      }
      .chart {
        z-index: 1;
        position: fixed;
        width: 600px;
        height: 400px;
      }
    }
  }
}
</style>
